<template>
	<view>
		<u-navbar title="查看物流" autoBack placeholder></u-navbar>
		<!-- <view class="bg-white p-2">
			<view class="font-weight-bold font-28">物流单号:{{dataInfo.nu}}</view>
			<view class="font-weight-bold font-28">物流公司:{{dataInfo.com}}</view>
			<view class="font-weight-bold font-28">物流状态:{{dataInfo.state|state}}</view>
		</view>
		
		<view class="mt-2 bg-white p-2">
			<u-steps  direction="column">
				<u-steps-item :title="item.context" :desc="item.ftime" v-for="(item,index) in dataInfo.data" :key="index">
					
				</u-steps-item>
			</u-steps>
		</view> -->
		<view class="flex bg-white p-3 px-5 border-top">
			<u-image src="" width="62" height="62" radius="16rpx" bg-color="#636468"></u-image>
			<view class="flex flex-column justify-between ml-4">
				<view class="font-28">订单编号：{{dataInfo.order_num?dataInfo.order_num:''}}</view>
				<view class="font-28">物流公司：{{dataInfo.express_company?dataInfo.express_company:''}}</view>
				<view class="font-28">物流单号：{{dataInfo.nu?dataInfo.nu:''}}</view>
			</view>
		</view>
		
		
		<view class="mt-2 bg-white mx-2" style="border-radius: 16rpx;">
			<view class="px-3 py-2 border-bottom">物流详情</view>
			<u-steps class="mt-5" direction="column" dot active-color="#f86500">
				<u-steps-item v-for="(item,index) in dataInfo.data" :key="index">
					<view class="conText" slot="desc" >
						<view :class="{conTextColor:index==0}">
							<view class="ctPostion">
								{{item.context}}
							</view>
						</view>
						<view class="mt-2 mb-4 font-28" >
							{{item.ftime}}
						</view>
					</view>
				</u-steps-item>
			</u-steps>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataInfo:{}
			}
		},
		filters:{
		  	state(value){
				if(value === '0'){
					return '在途中'
				}
				if(value === '1'){
					return '已揽收'
				}
				if(value === '2'){
					return '疑难'
				}
				if(value === '3'){
					return '已签收'
				}
				if(value === '5'){
					return '同城派送'
				}
				if(value === '6'){
					return '退回'
				}
				if(value === '7'){
					return '转单'
				}
			}
		},
		onLoad(e) {
			this.getData(e.orderId)
		},
		methods: {
			getData(Id){
				this.$api.logistics({
					id:Id
				}).then(res=>{
					if(res.code === 1){
						this.dataInfo = res.data
						console.log(this.dataInfo)
					}
				})
			}
		}
	}
</script>

<style scoped>
  .conTextColor {
	  color: #f79850;
  }
  .conText {
	  color: #424242;
  }
  .ctPostion {
	  margin-top: -30rpx;
  }
</style>
